<template>
  <div class="menu-bar">
     <div class="md-left">
        <slot name="md-left"></slot>
      </div>
      <div class="md-right">
        <slot name="md-right"></slot>
      </div>
  </div>
</template>

<script>
export default {
  name:'MenuBar'
}
</script>

<style scoped>
 
  .menu-bar{
    width: 100%;
    height: 100px;
    position: relative;
    bottom: 130px;
    display: flex;
    justify-content: center;
    background-color: rgba(100, 100, 100, .1);
  }
  .md-left{
    width: 60%;
    height: 100px;
  }
  .md-right{
    width: 40%;
    height: 100px;
  }
</style>